<template>
  <div class="company-list-1">
    <div class="header">
      <div class="prefix"></div>
      <div class="header-title">告警任务调度概览</div>
    </div>
    <div class="content">
      <div class="content-item">
        <div class="content-item-icon"></div>
        <div class="content-item-info">
          <div class="content-item-info-title">告警核实处理</div>
          <div class="content-item-info-detail">
            <div class="box">
              <div class="box-label">告警事件数</div>
              <div class="box-value">{{ info?.eventCount || '-' }}</div>
            </div>
            <div class="box">
              <div class="box-label">平均耗时</div>
              <div class="box-value">{{ info?.eventConsuming || '-' }}</div>
            </div>
            <div class="box">
              <div class="box-label">核实准确率</div>
              <div class="box-value">{{ info?.checkRate || '-' }}%</div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-item">
        <div class="content-item-icon"></div>
        <div class="content-item-info">
          <div class="content-item-info-title">任务调度</div>
          <div class="content-item-info-detail">
            <div class="box">
              <div class="box-label">调度任务数</div>
              <div class="box-value">{{ info?.taskCount || '-' }}</div>
            </div>
            <div class="box">
              <div class="box-label">人均任务耗时</div>
              <div class="box-value">{{ info?.taskConsuming || '-' }}</div>
            </div>
            <div class="box">
              <div class="box-label">处理超时率</div>
              <div class="box-value">{{ info?.timeoutRate || '-' }}%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const {info} = defineProps({
  info: {
    type: Object,
    default: () => {
    }
  }
})
</script>

<style scoped lang="scss">
@import '@/assets/table.css';

.company-list-1 {
  padding: 10px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: 16px;

  .header {
    width: 350px;
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .prefix {
      width: 8px;
      height: 15px;
      background-color: #31a7ff;
    }

    .header-title {
      padding-left: 10px;
    }
  }

  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 10px;

    &-item {
      width: 100%;
      height: 120px;
      background-position: center, center;
      background-repeat: no-repeat, no-repeat;
      background-size: cover, cover;
      display: flex;

      &-icon {
        width: 80px;
        height: 80px;
        border-radius: 52px;
        padding: 2px 2px 2px 2px;
        border: 2px solid rgba(17, 228, 138, 0.65);
        background-color: rgba(17, 228, 138, 0.1);
        background: url('@/assets/task/u1460.svg') no-repeat center center;
        margin-right: 10px;
      }

      &-info {
        flex: 1;

        &-title {
          line-height: 50px;
          font-size: 20px;
        }

        &-detail {
          display: flex;
          justify-content: space-between;

          .box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            &-label {
              color: rgba(255, 255, 255, 0.5);
            }

            &-value {
              font-size: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
